<template>
    <div class="header">
        <Menu mode="horizontal" theme="primary" active-name="1">
            <div class="header-logo"><h2>综合权限管理系统<Tag style="margin-left:5px;">beta1.0 </Tag></h2></div>
            <MsgPush  style="margin-left:30px" :data="msgPushData"></MsgPush>
            <div class="header-logout">
              <Row type="flex" justify="end" align="middle" class="user-dropdown-innercon">
                    <Dropdown transfer trigger="click" @on-click="handleClickUserDropdown" placement="bottom-end">
                        <a href="javascript:void(0)">
                            <span class="main-user-name">欢迎您 ，{{username}}</span>
                            <Icon type="arrow-down-b"></Icon>
                        </a>
                        <DropdownMenu slot="list">
                            <!-- <DropdownItem name="ownSpace">个人中心</DropdownItem>
                            <DropdownItem name="opinionFeedback">意见反馈</DropdownItem>
                            <DropdownItem name="changeLog">更新日志</DropdownItem>-->
                            <!-- <DropdownItem name="loginout" divided>退出登录</DropdownItem> -->

                            <div class="dropdown-box">
                              <Row>
                                  <Col style="text-align:center;" span="8">
                                    <a @click="handleClickUserDropdown('ownSpace')"><Icon class="icon-a" type="ios-person-outline"></Icon>个人中心</a>
                                  </Col>
                                  <Col style="text-align:center;" span="8">
                                    <a @click="handleClickUserDropdown('opinionFeedback')"><Icon class="icon-a" type="compose"></Icon>意见反馈</a>
                                  </Col>
                                  <Col style="text-align:center;" span="8">
                                    <a @click="handleClickUserDropdown('changeLog')"><Icon class="icon-a" type="chatboxes"></Icon>更新日志</a>
                                  </Col>
                                  <Col style="text-align:center;" span="8">
                                    <a @click="lockScreen"><Icon class="icon-a" type="ios-locked"></Icon>锁屏</a>
                                  </Col>
                                  <Col style="text-align:center;" span="8">
                                    <a @click="openDocument"><Icon class="icon-a" type="document"></Icon>文档</a>
                                  </Col>
                                  <Col style="text-align:center;" span="8">
                                    <a @click="openSetting"><Icon class="icon-a" type="gear-a"></Icon>设置</a>
                                  </Col>
                              </Row>
                              <div class="logout" @click="handleClickUserDropdown('loginout')">
                                <Icon type="log-out"></Icon> 退出登录
                              </div>
                            </div>
                        </DropdownMenu>
                    </Dropdown>
                    <Avatar :src="avatorPath" style="background: #619fe7;margin-left: 10px;"></Avatar>
                </Row>
            </div>
        </Menu>
    </div>
</template>

<script>
import util from '@/libs/util'
import MsgPush from '@/components/ui/msg-push'
import Cookies from 'js-cookie'
export default {
  name: "Navbar",
  data () {
    return {
      msgPushData: [
        {
          image: require('@/assets/user.png'),
          from: 'JesseLuo',
          time: '2017-1-8',
          message: 'I like your website very much!'
        },
        {
          image: require('@/assets/user.png'),
          from: 'JesseLuo',
          time: '2017-1-8',
          message: 'I like your website very much!'
        },
        {
          image: require('@/assets/user.png'),
          from: 'JesseLuo',
          time: '2017-1-8',
          message: 'I like your website very much!'
        },
        {
          image: require('@/assets/user.png'),
          from: 'JesseLuo',
          time: '2017-1-8',
          message: 'I like your website very much!'
        },
        {
          image: require('@/assets/user.png'),
          from: 'JesseLuo',
          time: '2017-1-8',
          message: 'I like your website very much!'
        }
      ]
    }
  },
  components: {
    MsgPush
  },
  methods: {
    handleClickUserDropdown(name) {
      if (name === "loginout") {
        localStorage.clear();
        this.$store.dispatch("logout").then((response) => {
          this.$router.push({
            name: "login"
          });
          if(response) {
            const {httpCode} = response
            if(httpCode === 200) {
              this.$Message.success('退出成功');
            }　else {
              this.$Message.error('退出失败');
            }
          }　else {
            this.$Message.error('退出失败');
          }
        })
      } else if(name === 'opinionFeedback') {
        this.$router.push({
            name: 'opinion_feedback'
        });
      } else if(name === 'changeLog') {
        this.$router.push({
            name: 'change_log'
        });
      } else if(name === 'ownSpace') {
        this.$router.push({
            name: 'ownspace_index'
        });
      }
    },
    lockScreen() {
      let lockScreenBack = document.getElementById('lock_screen_back');
      lockScreenBack.style.transition = 'all 3s';
      lockScreenBack.style.zIndex = 10000;
      lockScreenBack.style.boxShadow = '0 0 0 ' + this.lockScreenSize + 'px #667aa6 inset';
      this.showUnlock = true;
      Cookies.set('last_page_name', this.$route.name); // 本地存储锁屏之前打开的页面以便解锁后打开
      this.$store.dispatch('lock').then( (response) => {
        if(response) {
          lockScreenBack.style.transition = 'all 0s';
          this.$router.push({
              name: 'locking'
          });
        }
      })
    },
    openDocument() {
      this.$Message.info("该功能未实现");
    },
    openSetting() {
      this.$Message.info("该功能未实现");
    }
  },
  computed: {
    avatorPath() {
      return localStorage.avatorPath;
    },
    username() {
      return localStorage.username;
    }
  },
  mounted () {
    let lockdiv = document.createElement('div');
    lockdiv.setAttribute('id', 'lock_screen_back');
    lockdiv.setAttribute('class', 'lock-screen-back');
    document.body.appendChild(lockdiv);
    let lockScreenBack = document.getElementById('lock_screen_back');
    let x = document.body.clientWidth;
    let y = document.body.clientHeight;
    let r = Math.sqrt(x * x + y * y);
    let size = parseInt(r);
    this.lockScreenSize = size;
    window.addEventListener('resize', () => {
        let x = document.body.clientWidth;
        let y = document.body.clientHeight;
        let r = Math.sqrt(x * x + y * y);
        let size = parseInt(r);
        this.lockScreenSize = size;
        lockScreenBack.style.transition = 'all 0s';
        lockScreenBack.style.width = lockScreenBack.style.height = size + 'px';
    });
    lockScreenBack.style.width = lockScreenBack.style.height = size + 'px';
  }
};
</script>

<style>
.header {
  background: #f5f7f9;
}

.header-logo {
  /*width: 100px;*/
  height: 30px;
  padding: 0px 10px 0px 10px;
  /* background: #5b6270; */
  border-radius: 3px;
  float: left;
  position: relative;
  top: 15px;
  left: 20px;
  color: #fff;
  line-height: 30px;
}
.header-logo h2 {
  color: #fff;
  /* background-color: #fff; */
  /* background-clip: text; */
}
.header-nav {
  float: right;
}
.header-logout {
  padding: 0px 10px 0px 10px;
  height: 30px;
  border-radius: 3px;
  float: right;
  overflow: hidden;
  position: relative;
  top: 15px;
  line-height: 30px;
  color: #fff;
}
.main-user-name {
  display: inline-block;
  padding-left:5px;
  padding-right:5px;
  word-break: keep-all;
  white-space: nowrap;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
  color: #fff;
}
a {
  color: #fff;
}

.dropdown-box {
  width:260px;
  overflow: hidden;
}

.dropdown-box a {
  color: #a4abbb;
  padding: 15px 10px !important;
  width: 100%;
  font-size: 12px;
  list-style:none;
  clear: both;
  line-height: 1.42;

  white-space:nowrap;
  display: inline-block;
}
.dropdown-box .logout {
  height: 50px;
  background: #a9d96c;
  line-height: 50px;
  text-align: center;
  color:#fff;
  font-size:16px;
  cursor:pointer;
}
.dropdown-box .icon-a {
  font-size:24px;
  color:#a4abbb;
  display: block;
}
.dropdown-box .icon-a:hover {
  color:rgb(80,200,234);
}

.ivu-select-dropdown {
  /* margin-top:15px !important; */
  padding: 0px !important;
}
</style>
